<template>

    <div class="indexglobal">
        <el-container style="height: 100%;">
            <el-header>
                <div class="headers">
                    <div class="name"><img class="logo" src="../assets/logo.jpg" alt="" style=""> Omega云盘</div>
                    <div style="display: flex;align-items: center;">

                        <Upload @getfilelist="showlist" ref="uploadref"></Upload>
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                <img class="avatar" :src="avatar" alt="" srcset="">
                                {{ userinfo.nickName }}
                                <el-icon class="el-icon--right">
                                    <arrow-down />
                                </el-icon>
                            </span>

                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item @click="updateAvatar">修改头像</el-dropdown-item>
                                    <el-dropdown-item @click="updatepassword">修改密码</el-dropdown-item>
                                    <el-dropdown-item @click="logout">退出</el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>

                    </div>

                </div>
            </el-header>
            <el-container>
                <el-aside width="300px">
                    <div class="aside">
                        <div class="menus">
                            <Menu></Menu>

                        </div>
                        <div class="submenus">
                            <Submenu ref="submenu"></Submenu>
                        </div>

                    </div>
                </el-aside>
                <el-main>
                    <!-- <router-view></router-view>
                 -->
                    <router-view v-slot="{ Component }">
                        <component @addFile="addFile" ref="components" :is="Component"></component>
                    </router-view>
                </el-main>
            </el-container>
        </el-container>
        <UpdateAvatarDialog ref="updateAvatarRef" @updateavatar="updateavatar"></UpdateAvatarDialog>
        <UpdatePasswordDialog ref="updatepasswordRef"></UpdatePasswordDialog>
    </div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import Cookie from "@/utils/Cookie";
import VueCookies from 'vue-cookies'
import Menu from '@/component/Menu.vue';
import Submenu from "@/component/Submenu.vue"
import router from '@/router';
import UpdateAvatarDialog from "@/component/UpdateAvatarDialog.vue"
import UpdatePasswordDialog from "@/component/UpdatePasswordDialog.vue"
import { getCurrentInstance } from 'vue';
import Upload from "@/component/Upload.vue"

const instance = getCurrentInstance();
const avatar = ref("")
const submenu = ref(null);
const updateAvatarRef = ref(null)
const components = ref(null)
const updatepasswordRef = ref(null)
const userinfo = JSON.parse(Cookie.getcookie("userInfo"));
onMounted(() => {
    getsrc()
    submenu.value.getUseSpace()
})
const getsrc = () => {
    avatar.value = "/api/getAvatar/" + userinfo.userId + "?time=" + new Date();
    instance.proxy.$forceUpdate();

}
const uploadref = ref(null);
const logout = () => {
    VueCookies.remove("userInfo")
    router.push({
        path: "/"
    })
}
const updateAvatar = () => {
    console.log(userinfo)
    updateAvatarRef.value.open(userinfo)
}
const updatepassword = () => {
    updatepasswordRef.value.open();
}
const updateavatar = () => {
    console.log("1233545")
    getsrc()
}
const addFile = (e, f) => {
    console.log(e, f, "ef")
    uploadref.value.open(e, f)
}
const showlist = () => {
    components.value.getlist()
}

</script>
<style scoped>
.indexglobal {
    width: 100%;
    height: 100%;
}

.headers {
    width: 100%;
    height: 100%;
    display: flex;
    padding: 0px 20px;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 3px 10px #0000000f;
}

.logo {
    width: 40px;
    height: 40px;
    vertical-align: middle;
}

.name {
    font-weight: 700;
    margin-left: 5px;
    font-size: 25px;
    color: #05a1f5;
}

.avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    vertical-align: middle;
}

.aside {
    width: 100%;
    display: flex;
    height: 100%;
}

.menus {
    width: 80px;
    height: 100%;
}
</style>
<style>
.el-dropdown-link {
    outline: none !important;
}

.el-header {
    padding: 0px !important;
}

.submenus {
    width: calc(100% - 80px);
}
</style>